import { SearchOutlined } from "@ant-design/icons";
import { Affix, Col, Input, Row } from "antd";
import { PubSub } from "pubsub-js";
import { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import LoginModal from "../Modal/404Modal";
import "./index.css";

class Header extends Component {
	state = {
		isModalVisible: false,
		searchIconDisplay: "",
		searchInputDisplay: "none",
		headerTitle: "欢迎光临",
		queryData: {},
		opacity: 1,
	};

	componentDidMount() {
		// 订阅消息
		this.pubsub_token = PubSub.subscribe(
			"Update_HeaderTitle",
			function (_, text) {
				this.setState({
					headerTitle: text,
				});
			}.bind(this),
		);
	}
	componentWillUnmount() {
		// 销毁订阅
		PubSub.unsubscribe(this.pubsub_token);
	}
	// 显示404跳转窗
	show404Model() {
		this.setState({
			isModalVisible: true,
		});
		console.log(this.state.isModalVisible);
	}

	// 显示查询条
	showSearchInput() {
		this.setState({ searchIconDisplay: "none", searchInputDisplay: "" });
		this.input.focus();
	}

	// 隐藏查询条
	hiddenSearchInput(e) {
		if (e.target.value === "") {
			this.setState({ searchIconDisplay: "", searchInputDisplay: "none" });
		}
	}

	// 查询文章
	searchArticle(e) {
		this.props.history.push(`/article/list/${e.target.value}`);
		this.setState({
			headerTitle: `查询：'${e.target.value}'`,
		});
		PubSub.publish("Update_CardList");
	}

	// 固钉改变
	affixChange(e) {
		if (e) {
			// console.log("固钉位置发生改变");
		}
	}

	closeModel() {
		this.setState({
			isModalVisible: false,
		});
	}
	render() {
		return (
			<div className="header">
				<Affix offsetTop={0} onChange={this.affixChange.bind(this)}>
					<Row>
						<Col id="header_page" className="header-page" span="24">
							<div id="title" className="header-title">
								<a href="/">
									<span>{this.props.title_}</span>
								</a>
							</div>
							<div
								id="toolbar"
								className="header-toolbar"
								style={{ float: "right" }}
							>
								<div className="header-search">
									<Input
										ref={(input) => (this.input = input)}
										style={{ display: this.state.searchInputDisplay }}
										onMouseOut={this.hiddenSearchInput.bind(this)}
										onPressEnter={this.searchArticle.bind(this)}
									></Input>
									<SearchOutlined
										style={{ display: this.state.searchIconDisplay }}
										onMouseOut={this.showSearchInput.bind(this)}
									/>
								</div>
								<div>
									<Link to="/">归档</Link>
								</div>
								<div>
									<Link to="/">分类</Link>
								</div>
								<div>
									<Link to="/">标签</Link>
								</div>
								<div>
									<span onClick={this.show404Model.bind(this)}>404</span>
								</div>
							</div>
						</Col>

						<LoginModal
							title="404 Login"
							visible={this.state.isModalVisible}
							onCancel={this.closeModel.bind(this)}
						></LoginModal>
					</Row>
				</Affix>
				<Row className="header-index">
					<h1 style={{ zIndex: 2 }}>
						{this.state.headerTitle}{" "}
						<span style={{ opacity: this.state.opacity }}>_</span>
					</h1>
				</Row>
			</div>
		);
	}
}

export default withRouter(Header);
